import {defineComponent, PropType} from 'vue';

import {MenuType,Menu} from './menu';
import {useRoute, useRouter} from "vue-router";

export const DocMenu = defineComponent({
  props:{
    menus:{type: Object as PropType<Menu[]>, required: true }
  },
  setup(props,ctx) {
    const route = useRoute();
    const router = useRouter();

    const renderMenuLink = (menu:Menu,key:number)=>{
      // console.log('menu.path:',menu.path);
      // console.log('route.path:',route.path);
      const active = menu.path === route.path; //不带hash query
      return  (
        <li key={key}
            class={[
              'text-color--primary',
              'doc-page-menu-link',
              {'doc-page-menu-link--active':active}
            ]}
            onClick={()=>{
              console.log('准备跳转到path ---> menu.path:', menu.path);
              router.push({
                path: menu.path!.startsWith('/') ? menu.path! : '/' + menu.path!
              })
            }}
        >
          {active && <pl-icon icon='el-icon-s-promotion'/>}
          <span>{menu.name}</span>
          <span class='doc-page-menu-tip'>{menu.tip}</span>
        </li>
      )
    }

    return () => {
      return <section class='doc-page-menu'>
        <ul class='doc-page-menu__list'>
          {
            props.menus.map((menu, menuIndex) => {
              switch (menu.type) {
                case MenuType.title:
                  return <li class="doc-page-menu__list__title background-color-primary">
                    <pl-icon icon="el-icon-d-arrow-left"/>
                    <span>{menu.name}</span>
                    <pl-icon icon="el-icon-d-arrow-right"/>
                  </li>
                case MenuType.menu:
                  return renderMenuLink(menu, menuIndex);
                case MenuType.group:
                  return <li class='doc-page-menu__list__group text-color--primary'>
                    <div class='doc-page-menu__list__group__title'>
                      <pl-icon icon='el-icon-list'/>
                      <span>{menu.name}</span>
                    </div>
                    <ul>
                      {menu.menus!.map((subMenu, subIndex) => renderMenuLink(subMenu,subIndex))}
                    </ul>
                  </li>;
              }
            })
          }
        </ul>
      </section>;
    }
  }
})
